<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<!-- 
	通过一个对象变量，将元素的style属性当做一个对象来绑定，便于修改单个css属性
	经过编译为字符串后，固定不变的style和动态的style的css属性最终合并为一个style属性 
	示例: 用上下左右四个按钮控制一个小方块的移动
-->
		<div id="app">
			<button @click="onUp">上</button>
			<button @click="onDown">下</button>
			<button @click="onLeft">左</button>
			<button @click="onRight">右</button>
			<div id="pop" style="position: fixed;
          width: 100px;
          height: 100px;
          background-color: pink;" :style="styleObject"></div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						styleObject: {
							top: "200px",
							left: "200px",
						}
					}
					//这部分初始编译为: "top:200px; left:200px"s
					//可通过开发者工具查看页面元素
				},
				methods: {
					onUp() { //上
						var top = parseInt(this.styleObject.top);
						top -= 20;
						this.styleObject.top = top + "px";
					},
					onDown() { //下
						var top = parseInt(this.styleObject.top);
						top += 20;
						this.styleObject.top = top + "px";
					},
					onLeft() { //左
						var left = parseInt(this.styleObject.left);
						left -= 20;
						this.styleObject.left = left + "px";
					},
					onRight() { //右	
						var left = parseInt(this.styleObject.left);
						left += 20;
						this.styleObject.left = left + "px";
					}
				},
			}).mount("#app");
		</script>
	</body>

</html>